<template>
  <div class="dashboard-container" >
    <h1 style="text-align: center;margin-bottom: 40px;font-size: 35px;color: #486180">订房管理</h1>

    <el-dialog title="新增" :visible.sync="addButtonController" width="30%" @close="closeReserve('ruleForm')">
      <el-form label-width="20%" :model="addList" ref="ruleForm">
        <el-form-item label="房间号" prop="roomNumber">
          <el-select v-model="addList.roomId" clearable placeholder="房间号" style="width: 80%" >
            <el-option
              v-for="item in roomNumberList"
              :key="item.roomId"
              :label="item.roomNumber"
              :value="item.roomId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顾客" prop="customerId">
          <el-select v-model="addList.customerId" clearable placeholder="顾客" style="width: 80%" >
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName + '-' + item.identificationCard"
              :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入住时间" prop="reserveLiveTime">
          <el-date-picker
            v-model="addList.reserveLiveTime"
            type="datetime"
            placeholder="选择入住时间"
            value-format="yyyy-MM-dd HH:mm:ss" style="width: 80%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="入住天数" prop="reserveDayNumber">
          <el-input v-model="addList.reserveDayNumber" maxlength="100" show-word-limit style="width: 80%" clearable placeholder="请输入入住天数"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addList.remark" maxlength="100" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="addReserve('ruleForm')">确 定</el-button>
        <el-button plain @click="closeReserve('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog title="入住" :visible.sync="updateButtonController" width="30%" @close="closeReserve('ruleForm')">
      <el-form label-width="20%" ref="ruleForm">
        <p style="text-align: center; font-size: 16px;">确认是否入住</p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="updateAllReserve('ruleForm')">确 定</el-button>
        <el-button plain @click="closeReserve('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="取消" :visible.sync="cancelReserveController" width="30%" @close="closeCancelReserve('ruleForm')">
      <el-form label-width="20%" ref="ruleForm">
        <p style="text-align: center; font-size: 16px;">确认是否取消</p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="cancelAllReserve('ruleForm')">确 定</el-button>
        <el-button plain @click="closeCancelReserve('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog title="作废" :visible.sync="abrogateReserveController" width="30%" @close="closeAbrogate('ruleForm')">
      <el-form label-width="20%" ref="ruleForm">
        <p style="text-align: center; font-size: 16px;">确认是否作废</p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="abrogateAllReserve('ruleForm')">确 定</el-button>
        <el-button plain @click="closeAbrogate('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <el-button type="primary" plain style="width:80px;margin-bottom:30px;margin-left:10% ;" @click="addButton">
      新增
    </el-button>

    <el-select v-model="state" clearable placeholder="预定状态" style="margin-left: 40px;width: 200px">
      <el-option
        v-for="item in states"
        :key="item.state"
        :label="item.state"
        :value="item.state">
      </el-option>
    </el-select>

    <el-input
      v-model="roomNumber"
      placeholder="房间号"
      name="roomNumber"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />

    <el-input
      v-model="reserveId"
      placeholder="预定ID"
      name="reserveId"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />

    <el-button type="primary" plain style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="selectReserve">查询</el-button>
    <el-button  style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="checkReserve">重置</el-button>

    <el-table :data="reserveList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="600px" border style="width: 100%;margin-top: 20px">
      <el-table-column align="center" fixed prop="reserveId" sortable label="预定ID"/>
      <el-table-column align="center" fixed prop="roomNumber" sortable label="房间号"/>
      <el-table-column align="center" fixed prop="customerName" sortable label="顾客名称"/>
      <el-table-column align="center" fixed prop="identificationCard" sortable label="身份证号"/>
      <el-table-column align="center" fixed prop="state" sortable label="预定状态"/>
      <el-table-column align="center" fixed prop="liveId" sortable label="订单ID"/>
      <el-table-column align="center" fixed prop="reserveTime" sortable label="预定时间"/>
      <el-table-column align="center" fixed prop="reserveLiveTime" sortable label="入住时间"/>
      <el-table-column align="center" fixed prop="reserveDayNumber" sortable label="入住天数"/>
      <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
      <el-table-column align="center" fixed prop="abrogateIdentity" sortable label="作废标识"/>
      <el-table-column align="center" fixed label="操作">

        <template v-slot="scope">
          <!--  入住、取消、作废 -->
          <el-button v-if="scope.row.state === '预定中' && scope.row.abrogateIdentity !== '已作废'" type="text" @click="updateButton(scope.row)">入住</el-button>
          <el-button v-if="scope.row.state === '预定中' && scope.row.abrogateIdentity !== '已作废'" type="text" @click="cancelReserveButton(scope.row)">取消</el-button>
          <el-button v-if="scope.row.state === '预定中' && scope.row.abrogateIdentity !== '已作废'" type="text" @click="abrogateReserveButton(scope.row)">作废</el-button>

        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top:20px; text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[7,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="reserveList.length">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {abrogateStay, cancelStay, insertStay, selectAllStay} from "@/api/stay";
import {selectAllCustomer} from "@/api/Customer";
import {abrogateReserve, cancelReserve, insertReserve, selectAllReserve, updateReserve} from "@/api/reserve";
import {selectAllRoom} from "@/api/room";


export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data(){
    return{
      currentPage: 1,
      currentIndex: '',
      pagesize: 7,

      state:'',
      roomNumber:'',
      reserveId:'',
      reserveList:[],
      states:[],
      roomNumberList:[],
      customerList:[],
      addButtonController:false,
      updateButtonController:false,
      abrogateReserveController:false,
      cancelReserveController:false,
      addList: {
        customerId:'',
        roomId:'',
        roomNumber:'',
        customerName:'',
        identificationCard:'',
        reserveLiveTime:'',
        reserveDayNumber:'',
        remark:''
      },
      updateList:{
        liveId:'',
      },
      abrogateReserveList:{
        abrogateIdentity:'',
      },
      cancelReserveTableId:'',
      cancelReserveId:'',
    }
  },
  mounted() {
    this.selectReserve()
    this.fetchLive()
    this.fetchCustomerList()
    this.fetchRoomNumberList()
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },

    fetchLive(){
      selectAllReserve().then(response => {
        this.states = Object.values(
          response.data.reduce((selectState, item) => {
            selectState[item.state] = item; // 保留最后一个出现的重复项
            return selectState;
          }, {})
        );
      });
    },
    fetchCustomerList() {
      selectAllCustomer().then(response => {
        this.customerList = response.data.map(customer => ({
          customerId: customer.customerId,
          customerName: customer.customerName,
          identificationCard: customer.identificationCard
        }));
      });
    },
    fetchRoomNumberList() {
      selectAllRoom().then(response => {
        this.roomNumberList = Object.values(
          response.data.reduce((selectRoomId, item) => {
            selectRoomId[item.roomId] = item; // 保留最后一个出现的重复项
            return selectRoomId;
          }, {})
        );
      });
    },
    closeReserve(formName){
      this.$refs[formName].resetFields();
      this.addButtonController = false;
      this.updateButtonController = false;
    },
    addReserve(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertReserve({
            customerId:this.addList.customerId,
            roomId:this.addList.roomId,
            roomNumber:this.addList.roomNumber,
            customerName:this.addList.customerName,
            identificationCard:this.addList.identificationCard,
            reserveLiveTime:this.addList.reserveLiveTime,
            reserveDayNumber:this.addList.reserveDayNumber,
            remark:this.addList.remark
          }).then(
            response => {
              this.addButtonController = false
              this.$message.success("新增成功！"); // 添加成功提示
              this.selectReserve()
            }
          )
        } else {
          return false
        }
      })
    },
    updateAllReserve(formName) {
      updateReserve({
        liveId: this.updateList.liveId,
        reserveTableId: this.updateList.reserveTableId,
      }).then(response => {
        this.updateButtonController = false;
        this.$message.success('入住成功');
        this.selectReserve();
      }).catch(error => {
        console.error(error);
        this.$message.error('入住失败');
      });
    },
    closeCancelReserve(){
      this.cancelReserveController = false;
    },
    closeAbrogate(){
      this.abrogateReserveController = false;
    },
    cancelAllReserve(formName) {
      cancelReserve({
        reserveId:this.cancelReserveId,
        reserveTableId:this.cancelReserveTableId
      }).then(response => {
        this.cancelReserveController = false;
        this.$message.success('取消成功');
        this.selectReserve();
      });
    },
    abrogateAllReserve(formName) {
      abrogateReserve({
        abrogateIdentity:this.abrogateReserveList.abrogateIdentity,
        reserveTableId:this.abrogateReserveList.reserveTableId
      }).then(response => {
        this.abrogateReserveController = false;
        this.$message.success('作废成功');
        this.selectReserve();
      }).catch(error => {
        console.error(error);
        this.$message.error('作废失败');
      });
    },
    addButton(){
      this.addList = {
        customerId:'',
        roomId: '',
        roomNumber:'',
        customerName:'',
        identificationCard:'',
        reserveLiveTime:'',
        reserveDayNumber:'',
        remark:''
      }
      this.addButtonController = true
    },
    checkReserve(){
      this.reserveId = ''
      this.roomNumber = ''
      this.state = ''
      this.selectReserve()
    },
    updateButton(row){
      this.updateList={
        liveId: '',
        reserveTableId:row.reserveTableId,
      }
      this.updateButtonController = true
    },
    abrogateReserveButton(row){
      this.abrogateReserveList={
        abrogateIdentity: '',
        reserveTableId: row.reserveTableId
      }
      this.abrogateReserveController = true
    },
    cancelReserveButton(row){
      this.cancelReserveTableId = row.reserveTableId
      this.cancelReserveId = row.reserveId

      this.cancelReserveController = true
    },
    selectReserve(){
      this.currentPage = 1
      selectAllReserve({
        state:this.state,
        reserveId:this.reserveId,
        roomNumber:this.roomNumber,
      }).then(
        response => {
          console.log(response.data)
          this.reserveList = response.data.filter(item => item.state !== '已取消');
        }
      )
    },




  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
